<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    /* General body styling */
    body { 
      font-family: Arial, sans-serif; 
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background-color: #eef2f5;
      color: #333;
    }

    /* Container for form and result */
    .container {
      width: 100%;
      max-width: 500px;
      padding: 20px;
      border-radius: 10px;
      background-color: #ffffff;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    /* Title */
    h1 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }

    /* Result box */
    #result { 
      margin: 15px 0 25px; 
      padding: 15px; 
      border-radius: 8px; 
      background-color: #f8f9fa; 
      border: 1px solid #d1d9e6;
      font-size: 15px;
      min-height: 40px; 
      color: #555; 
    }

    /* Form labels and inputs */
    label {
      font-size: 14px;
      color: #666;
      margin-top: 10px;
      text-align: left;
      display: block;
      margin-bottom: 5px;
    }

    select, input[type="text"], textarea {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      border: 1px solid #d1d9e6;
      border-radius: 5px;
      font-size: 15px;
      color: #333;
      background-color: #f5f7f9;
      transition: border-color 0.3s ease;
    }
    select:focus, input[type="text"]:focus, textarea:focus {
      border-color: #5a9ec9;
      outline: none;
    }

    /* Buttons */
    .button-group {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;
    }
    input[type="submit"], button {
      padding: 15px 20px;
      font-size: 18px;
      font-weight: bold;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
      min-width: 100px;
    }
    input[type="submit"] {
      background-color: #4CAF50; 
      color: #fff;
    }
    button {
      background-color: #007bff;
      color: #fff;
    }
    input[type="submit"]:hover {
      background-color: #43a047;
    }
    button:hover {
      background-color: #0069d9;
    }
    input[type="submit"]:active, button:active {
      transform: scale(0.98);
    }

    /* Copy notification */
    .copy-notification {
      display: none;
      color: #28a745;
      font-size: 14px;
      margin-top: 10px;
    }

    /* Result highlight */
    #result.highlight {
      background-color: #fffbcc;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>MEMO FOR STATEMENTS AND REPRINTS</h1>
    <div id="result">Your memo will appear here.</div>

    <form id="sentenceForm">
      <label for="templateSelect">Choose a memo:</label>
      <select id="templateSelect" required onchange="updateFormFields()">
        <option value="">Select a memo</option>
        <option value="statement">Statement</option>
        <option value="reprint">Reprint</option>
      </select>

      <label id="emailLabel" for="emailRecipient">Dates | Letter Id:</label>
      <input type="text" id="emailRecipient" placeholder="Enter dates or letter ID" required>
      
      <label for="emailInput">Email:</label>
      <input type="text" id="emailInput" placeholder="Enter email content" required>

      <div class="button-group">
        <input type="submit" value="Submit">
        <button type="button" onclick="clearFields()">Clear</button>
        <button type="button" onclick="copyToClipboard()">Copy</button>
      </div>
      <div class="copy-notification" id="copyNotification">Copied to clipboard!</div>
    </form>
  </div>

  <script>
    function updateFormFields() {
      const template = document.getElementById('templateSelect').value;
      const emailLabel = document.getElementById('emailLabel');
      const emailRecipientContainer = document.getElementById('emailRecipient').parentElement;
      const emailRecipient = document.getElementById('emailRecipient');

      // Replace input with textarea for "Reprint"
      if (template === "reprint") {
        emailLabel.innerText = "Letter ID:";
        const textarea = document.createElement("textarea");
        textarea.id = "emailRecipient";
        textarea.placeholder = "Enter detailed letter ID";
        textarea.required = true;
        textarea.style.width = "100%"; // Ensure styling matches
        textarea.style.padding = "10px";
        textarea.style.marginTop = "5px";
        textarea.style.border = "1px solid #d1d9e6";
        textarea.style.borderRadius = "5px";
        textarea.style.fontSize = "15px";
        textarea.style.color = "#333";
        textarea.style.backgroundColor = "#f5f7f9";

        emailRecipientContainer.replaceChild(textarea, emailRecipient);
      } else {
        emailLabel.innerText = "Date:";
        const input = document.createElement("input");
        input.type = "text";
        input.id = "emailRecipient";
        input.placeholder = "Enter the date";
        input.required = true;

        emailRecipientContainer.replaceChild(input, emailRecipient);
      }
    }

    document.getElementById('sentenceForm').onsubmit = function(e) {
      e.preventDefault();
      const template = document.getElementById('templateSelect').value;
      const emailRecipient = document.getElementById('emailRecipient').value;
      const emailInput = document.getElementById('emailInput').value;

      google.script.run.withSuccessHandler(function(completedSentence) {
        document.getElementById('result').innerText = completedSentence;
      }).completeSentence(template, emailRecipient, emailInput);
    };

    function clearFields() {
      document.getElementById('templateSelect').value = '';
      updateFormFields();
      document.getElementById('emailInput').value = '';
      document.getElementById('result').innerText = 'Your completed sentence will appear here.';
      document.getElementById('result').classList.remove('highlight');
      document.getElementById('copyNotification').style.display = 'none';
    }

    function copyToClipboard() {
      const resultElement = document.getElementById('result');
      const resultText = resultElement.innerText;

      if (resultText && resultText !== 'Your completed sentence will appear here.') {
        resultElement.classList.add('highlight');
        navigator.clipboard.writeText(resultText).then(() => {
          const copyNotification = document.getElementById('copyNotification');
          copyNotification.style.display = 'block';
          setTimeout(() => {
            copyNotification.style.display = 'none';
          }, 1500);
        });
      }
    }
  </script>
</body>
</html>
